<template>
    <!-- 近7天废水排放量 -->
    <div class="WastewaterDischarge">
        <CommonTitleComponent text="近7天废水排放量"></CommonTitleComponent>
        <div class="WastewaterDischarge_echarts">
            <chart-view
                :chart-option="
                    EchartsMethods.WastewaterDischarge({
                        unit: 'm³',
                        xVal: [
                            {
                                name: '06/17',
                                value: 175.17
                            },
                            {
                                name: '06/18',
                                value: 148.35
                            },
                            {
                                name: '06/19',
                                value: 95.36
                            },
                            {
                                name: '06/20',
                                value: 56
                            },
                            {
                                name: '06/21',
                                value: 56
                            },
                            {
                                name: '06/22',
                                value: 56
                            },
                            {
                                name: '06/23',
                                value: 56
                            }
                        ]
                    })
                "
                :auto-resize="true"
                height="100%"
            ></chart-view>
        </div>
        <CustomGreenInitiativeCommonCustomCarde
            class="model"
            :datalist="status.datalist"
        ></CustomGreenInitiativeCommonCustomCarde>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { EchartsMethods } from '@/chart/index';

const status = reactive({
    datalist: {
        name: '废水排放口',
        quantity: 3,
        complianceRate: 100
    }
});
</script>
<style lang="scss" scoped>
.WastewaterDischarge {
    height: 100%;
    padding-top: 15px;
    &_echarts {
        height: 74%;
        padding-top: 10px;
        box-sizing: border-box;
        div {
            height: 100%;
        }
    }
    .model {
        margin-top: 12px;
        height: 12%;
    }
}
</style>
